<template>
    <div class="convertMap">
        <el-select v-model="mapType"
                   @change="mapTypeChange"
                   @visible-change="mapTypeVisibleChange">
            <el-option label="cesium" value="cesium"></el-option>
            <el-option label="高德地图" value="gaode"></el-option>
        </el-select>
    </div>
    <!-- webgl -->
    <div v-if="mapType==='cesium'">
        <sm-viewer></sm-viewer>
        <real-coordinate></real-coordinate>
    </div>
    <!-- 百度 -->
    <div v-if="mapType==='gaode'">
        <gaode-map></gaode-map>
        <gaode-tool></gaode-tool>
        <gaode-hotspot></gaode-hotspot>
        <gaode-building></gaode-building>
    </div>
    <!-- openlayers -->
    <div v-if="mapType==='openlayers'">
    </div>
</template>

<script>
    import smViewer from '/src/components/cesium/smViewer.vue'
    import realCoordinate from '/src/components/cesium/realCoordinate.vue'
    import gaodeMap from '/src/components/gaode2/gaodeMap.vue'
    import gaodeTool from '/src/components/gaode2/gaodeTool.vue'
    import gaodeHotspot from "/src/components/gaode2/gaodeHotspot.vue";
    import gaodeBuilding from "/src/components/gaode2/gaodeBuilding.vue";

    import {queryMapRange as cesiumQueryMapRange} from '/src/components/cesium/tools/location'
    import {queryMapRange as gaodeQueryMapRange} from '/src/components/gaode2/tools/location'

    export default {
        name: "index",
        components: {smViewer, realCoordinate, gaodeMap, gaodeTool, gaodeHotspot, gaodeBuilding},
        data() {
            return {
                mapType: 'gaode'
            }
        },
        methods: {
            mapTypeChange(val) {
                if (val != 'cesium') {
                    this.$store.commit('SET_CESIUM_VIEWER_STATUS', false)
                }
                if (val != 'gaode') {
                    this.$store.commit('SET_GAODE_MAP_STATUS', false)
                }
            },
            mapTypeVisibleChange(val) {
                if (val) {
                    //以cesium为标准
                    switch (this.mapType) {
                        case "gaode":
                            console.log(gaodeQueryMapRange())
                            this.$store.commit('SET_MAP_RANGE', gaodeQueryMapRange())
                            break;
                        case "cesium":
                            console.log(cesiumQueryMapRange())
                            this.$store.commit('SET_MAP_RANGE', cesiumQueryMapRange())
                            break;
                    }
                }
            }
        },
    }
</script>

<style scoped>
    .convertMap {
        position: absolute;
        z-index: 3000;
    }
</style>
